<template>
  <div id="goodsMana">
    <div class="view-top">
      <span class="router-name">原料管理</span>
      <div class="fliter type">
        分类选择：
        <el-select v-model="fliter_type" style="width:120px;">
          <el-option key label="全部" value></el-option>
          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="searchBtn" style="padding-left:10px;">
        <button type="button" @click="fliterGoods" style="padding: 0 10px">筛选</button>
      </div>
      <span class="add-info">
        <button @click="addInfo">添加原料</button>
      </span>
    </div>
    <div class="cont">
      <div class="list-tit">
        <ul>
          <li>
            <span>序号</span>
            <span>原料名</span>
            <span>图片</span>
            <span>分类</span>
            <span>单位</span>
            <span>价格</span>
            <span>操作</span>
          </li>
        </ul>
      </div>
      <div class="goods-list">
        <ul>
          <li v-for="(item,index) in goodsList" :key="index">
            <span>1</span>
            <span>{{item.productName}}</span>
            <span class="img">
              <img :src="item.image" alt />
            </span>
            <span>{{item.productTypeName}}</span>
            <span>{{item.spec}}</span>
            <span>{{item.amount}}</span>
            <span>
              <a href="javaScript:;" @click="modifyGoods(item)">修改</a>
              <a href="javaScript:;" style="padding-left:10px" @click="delGoods(item)">删除</a>
            </span>
          </li>
        </ul>
      </div>
    </div>
    <el-dialog :title="titInfo" :visible.sync="showAddInfo" width="30%">
      <div class="info-item">
        <span class="info-name">商品名:</span>
        <span class="info-cont">
          <el-input v-model="goodsInfo.goodsName" placeholder="请输入商品名字"></el-input>
        </span>
      </div>
      <div class="info-item">
        <span class="info-name">价格:</span>
        <span class="info-cont">
          <el-input v-model="goodsInfo.amount" placeholder="请输入商品价格"></el-input>
        </span>
      </div>
      <div class="info-item">
        <span class="info-name">数量:</span>
        <span class="info-cont">
          <el-input v-model="goodsInfo.qty" placeholder="请输入商品数量"></el-input>
        </span>
      </div>
      <div class="info-item">
        <span class="info-name">单位:</span>
        <span class="info-cont">
          <el-select v-model="goodsInfo.specId" placeholder="请选择">
            <el-option v-for="item in specs" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </span>
      </div>
      <div class="info-item">
        <span class="info-name">分类:</span>
        <span class="info-cont">
          <el-select v-model="goodsInfo.typeId" placeholder="请选择">
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </span>
      </div>
      <div class="info-item">
        <span class="info-name">图片:</span>
        <span class="info-cont img">
          <span v-if="!goodsInfo.image">暂无图片</span>
          <img v-else :src="goodsInfo.image" alt />
          <div class="upload-img">
            <span>+</span>
            <input type="file" @change="cropImg" name="logo" id />
          </div>
        </span>
      </div>

      <div class="info-item hundred-width">
        <span class="info-name">备注:</span>
        <span class="info-cont">
          <el-input v-model="goodsInfo.notice" placeholder="商品备注"></el-input>
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddInfo = false">取 消</el-button>
        <el-button type="primary" @click="addGoods">确 定</el-button>
      </span>
    </el-dialog>
    <img-crop
      v-if="showCrop"
      :oldImg="oldImgBase64"
      :curCropW="curCropW"
      :curCropH="curCropH"
      :curStoreId="curStoreId"
      @closeImgCrop="showCrop=false"
      @getCropImgBase="getCropImgBase"
    ></img-crop>
  </div>
</template>

<script>
import { BASE_URL } from "./../../../../urlConfig";
import imgCrop from "./../../../../components/imgCrop/imgCrop";

export default {
  components: { imgCrop },
  data() {
    return {
      showAddInfo: false, //是否显示添加信息框
      titInfo: "", //标题信息
      goodsInfo: {
        id: 0,
        goodsName: "",
        spec: "",
        specId: "",
        qty: "",
        amount: 0,
        typeId: "",
        typeName: "",
        notice: "",
        image: "",
      },
      specs: [], //规格列表
      typeList: [], //分类列表
      fliter_type: "",
      goodsList: [], //原料列表
      typeId: "",
      showCrop: false,
      oldImgBase64: "",
      curCropW: 600, // 裁剪宽度
      curCropH: 600, // 裁剪高度
      curStoreId: "574b59ef-b19c-11e7-9233-37891743d141",
    };
  },
  methods: {
    fliterGoods() {
      this.typeId = this.fliter_type;
      this.getGoods();
    },
    // 获取规格
    getSpecs() {
      this.$http({
        url: BASE_URL + "v1/stock/spec-list",
        method: "GET",
        params: {},
      }).then((res) => {
        this.specs = res.data;
      });
    },
    //上传图片
    cropImg(e) {
      let reader = new FileReader();
      let that = this;
      let fileObj = e.target.files[0];

      if (e.target.files.length == 0) {
        return false;
      }

      // 判断图片大小
      if (fileObj.size > this.coverImgMaxSize) {
        this.errorMsg = "上传图片的大小不能超过5MB";
        this.openErrorTip = true;
        this.$message({
          message: "上传图片的大小不能超过5MB",
          type: "error",
        });
        return false;
      }

      reader.onload = (function (file) {
        return function (e) {
          let _this = this; // 缓存当前this
          let img = new Image();
          img.src = this.result;
          img.onload = function () {
            let imgBase64 = _this.result; //获得图片的base64的数据
            that.oldImgBase64 = imgBase64;
            that.showCrop = true;
          };
        };
      })(e.target.files[0]);

      reader.readAsDataURL(e.target.files[0]);
    },
    getCropImgBase(imgUrl) {
      this.goodsInfo.image = imgUrl;
    },
    // 获取分类
    getType() {
      this.$http({
        url: BASE_URL + "v1/stock/type-list",
        method: "GET",
        params: {},
      }).then((res) => {
        this.typeList = res.data;
      });
    },
    addInfo() {
      this.clearData();
      this.titInfo = "添加原料";
      this.showAddInfo = true;
    },
    clearData() {
      this.goodsInfo = {
        id: 0,
        goodsName: "",
        spec: "",
        specId: "",
        qty: "",
        amount: 0,
        typeId: "",
        typeName: "",
        notice: "",
        image: "",
      };
    },
    addGoods() {
      let checkState = this.checkGoodsData();
      if (checkState) {
        return;
      }
      let spec, productTypeName;
      for (let i = 0; i < this.typeList.length; i++) {
        if (this.goodsInfo.typeId == this.typeList[i].id) {
          productTypeName = this.typeList[i].name;
        }
      }
      for (let i = 0; i < this.specs.length; i++) {
        if (this.goodsInfo.specId == this.specs[i].id) {
          spec = this.specs[i].name;
        }
      }
      this.$http({
        url: BASE_URL + "v1/stock/pro-merge",
        method: "POST",
        data: {
          id: this.goodsInfo.id,
          productName: this.goodsInfo.goodsName,
          spec,
          specId: this.goodsInfo.specId,
          qty: this.goodsInfo.qty,
          amount: this.goodsInfo.amount,
          productTypeId: this.goodsInfo.typeId,
          productTypeName,
          notice: this.goodsInfo.notice,
          image: this.goodsInfo.image,
        },
      }).then((res) => {
        this.getGoods();
        this.showAddInfo = false;
        this.$message({
          message: "操作成功",
          type: "success",
        });
      });
    },
    modifyGoods(item) {
      this.goodsInfo = {
        id: item.id,
        goodsName: item.productName,
        specId: item.specId,
        qty: item.qty,
        amount: item.amount,
        typeId: item.productTypeId,
        typeName: item.productTypeName,
        notice: item.notice,
        image: item.image,
      };
      this.showAddInfo = true;
    },
    delGoods(item) {
      this.$confirm("确认此操作？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http({
          url: BASE_URL + "v1/stock/pro-remove",
          method: "GET",
          params: {
            id: item.id,
          },
        }).then((res) => {
          this.showAddInfo = false;
          this.getGoods();
        });
      });
    },
    getGoods() {
      this.$http({
        url: BASE_URL + "v1/stock/pro-list",
        method: "GET",
        params: {
          type: this.typeId ? this.typeId : 0,
        },
      }).then((res) => {
        this.goodsList = res.data;
      });
    },
    checkGoodsData() {
      if (!this.goodsInfo.goodsName) {
        this.$message({
          message: "请输入原料名",
          type: "error",
        });
        return true;
      }
      if (!this.goodsInfo.amount) {
        this.$message({
          message: "请填写金额",
          type: "error",
        });
        return true;
      }
      if (!this.goodsInfo.specId) {
        this.$message({
          message: "请选择单位规格",
          type: "error",
        });
        return true;
      }
      if (!this.goodsInfo.typeId) {
        this.$message({
          message: "请选择分类",
          type: "error",
        });
        return true;
      }
      if (!this.goodsInfo.typeId) {
        this.$message({
          message: "请选择分类",
          type: "error",
        });
        return true;
      }
    },
  },
  mounted() {
    this.getSpecs();
    this.getType();
    this.getGoods();
  },
};
</script>

<style lang="scss" >
@import "./goodsMana.scss";
</style>
